<template>
    <!-- <u-navbar title="服务订单" :custom-back="goMy" :back-icon-color="'#ffffff'" :title-color="'#ffffff'" :background="background"></u-navbar> -->
    <z-paging-swiper>
        <template #top>
            <z-tabs ref="tabs" class="service-tab" :current="current" :list="tabList" active-color="#e5530e" @change="tabChange" />
        </template>
        <swiper class="swiper" :current="current" @transition="swiperTransition" @animationfinish="swiperAnimationfinish">
            <swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
                <!-- 这里的swiper-list-item为demo中为演示用定义的组件，列表及分页代码在swiper-list-item组件内 -->
                <!-- 请注意，swiper-list-item非z-paging内置组件，在自己的项目中必须自己创建，若未创建则会报组件不存在的错误 -->
                <swiper-list-item :tabIndex="index" :currentIndex="current" @handleBtn="handleBtn"></swiper-list-item>
            </swiper-item>
        </swiper>
        <u-modal v-model="show" show-cancel-button :content="content" @confirm="confirm"></u-modal>
    </z-paging-swiper>
</template>

<script>
import { movieState } from "@/api/dictionary.js"
import swiperListItem from "../components/swiper-list-item/swiper-list-item.vue"
export default {
    components: {
        swiperListItem
    },
    data() {
        return {
            queryParams: {
                page: 1,
                limit: 20,
                type: '',
            },
            stateList: movieState, //订单状态 '':全部 -1:已取消 0:未接单 1:已接单 2:已(服务)完成
            tabList: [],
            loading: true,
            background: {
                // 渐变色
                backgroundImage: 'linear-gradient(to bottom right, #2e996f, #3f99ab)'
            },
            titleheight: 0,
            titletop: 0,
            current: 0,

            show: false,
            content: "",
            type: "",
            ids: "",
        };
    },
    onLoad(params) {
        if (params) {
            this.queryParams.type = params.type;
            this.current = this.stateList.findIndex(item => item.dictValue == params.type)
        }
        // #ifdef MP-WEIXIN
        getApp().getHeight();
        this.titleheight = getApp().titleheight;
        this.titletop = getApp().titletop;
        // #endif
    },
    onShow() {
        this.tabList = []
        this.stateList.forEach(e => {
            if (e.dictValue != '0' || e.dictValue != '-2') {
                this.tabList.push(e.dictLabel)
            }
        });
        console.log(this.tabList,"tabList")
        this.current = 0
        // console.log(this.current, "this.current")
    },
    methods: {

        handleBtn(data) {
            this.ids = data.id
            this.type = data.type
            if (data.type == 'cancle') {
                this.content = "是否要取消订单?"
            }
            this.show = true
        },
        confirm() {
            this.show = false
        },

        //swiper滑动中
        swiperTransition(e) {
            this.$refs.tabs.setDx(e.detail.dx);
        },
        //swiper滑动结束
        swiperAnimationfinish(e) {
            this.current = e.detail.current;
            console.log(e, "eee")
            this.$refs.tabs.unlockDx();
        },
        /**
         * 返回点击
         */
        onBack() {
            uni.navigateBack();
        },
        /**
         * 订单tab点击
         */
        onOrderTab(type) {
            this.queryParams.type = type;
            this.$refs.paging.reload();
        },
        tabChange(index) {
            this.current = index;
        },


        goMy() {
            uni.reLaunch({
                url: '/pages/my/my'
            })
        },
    }
}
</script>

<style>
page {
  background-color: #f6f6f6;
}
</style>
<style scoped lang="scss">
/* 订单tab */
.service-tab {
  position: fixed;
  left: 0;
  // #ifdef APP-PLUS || H5
  top: calc(88rpx + var(--status-bar-height));
  // #endif
  z-index: 9;
  width: 100%;

  /deep/.z-tabs-conatiner {
    height: 120rpx;
    padding-top: 20rpx;
  }
}
/deep/.zp-custom-refresher-view {
  //   z-index: 99999999;
  margin-top: calc(0rpx + var(--status-bar-height)) !important;
}
.swiper {
  height: 100%;
}
</style>
